<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:p="http://primefaces.org/ui">
    <ui:composition template="ClientTemplate.xhtml">   
        <ui:define name="body"> 
            <h:form>

                <div class="slider">
                    <p:galleria value="#{slideController.images}" var="image" panelWidth="500" panelHeight="1100" showCaption="true">  

                        <img src="#{request.contextPath}/resources/images/slideAnh/#{image}"  alt="Image Description for #{image}" title="#{image}"/>
                    </p:galleria> 
                </div>
                <div >
                    <div class="bubble">
                        <div class="rectangle"><h2>Our Success Story</h2></div>
                        <div class="triangle-l"></div>
                        <div class="triangle-r"></div> 
                        <div class="info">

                            <span class="image alignleft"><img src="#{request.contextPath}/resources//images/success.png" width="260px" height="180px" style="float:left; margin-right:30px;" /></span>	
                            <div class="info-content">
                                <h2>Got 25 customers per day</h2>
                                <p>Despite becoming fast friends during college, the two ended up parting ways after graduation with Verdelis taking up a consulting job in the United Kingdom and Eleftheriou moving to California to start a new venture. While living miles apart, both shared the same frustrations with their smartphones: It was hard to type text messages and emails on them.</p>
                                <p><a href="#" class="readmore">Read more</a></p>
                            </div>

                        </div>
                    </div>


                    <div class="bubble">
                        <div class="rectangle"><h2>Our Project</h2></div>
                        <div class="triangle-l"></div>
                        <div class="triangle-r"></div> 
                        <div class="info">

                            <span class="image alignleft"><img src="#{request.contextPath}/resources//images/project.jpg" width="260px" height="180px" style="float:left; margin-right:30px;" /></span>	
                            <div class="info-content">
                                <h2>Got 25 customers per day</h2>
                                <p>Despite becoming fast friends during college, the two ended up parting ways after graduation with Verdelis taking up a consulting job in the United Kingdom and Eleftheriou moving to California to start a new venture. While living miles apart, both shared the same frustrations with their smartphones: It was hard to type text messages and emails on them.</p>
                                <p><a href="#" class="readmore">Read more</a></p>
                            </div>

                        </div>
                    </div>
                    <div class="bubble">
                        <div class="rectangle"><h2>Our Success Stories</h2></div>
                        <div class="triangle-l"></div>
                        <div class="triangle-r"></div> 
                        <div class="info">

                            <span class="image alignleft"><img src="#{request.contextPath}/resources//images/success.png" width="260px" height="180px" style="float:left; margin-right:30px;" /></span>	
                            <div class="info-content">
                                <h2>Got 25 customers per day</h2>
                                <p>Despite becoming fast friends during college, the two ended up parting ways after graduation with Verdelis taking up a consulting job in the United Kingdom and Eleftheriou moving to California to start a new venture. While living miles apart, both shared the same frustrations with their smartphones: It was hard to type text messages and emails on them.</p>
                                <p><a href="#" class="readmore">Read more</a></p>
                            </div>

                        </div>
                    </div>

                    <div class="bubble">
                        <div class="rectangle"><h2>Our Success Stories</h2></div>
                        <div class="triangle-l"></div>
                        <div class="triangle-r"></div> 
                        <div class="info">

                            <span class="image alignleft"><img src="#{request.contextPath}/resources//images/project.jpg" width="260px" height="180px" style="float:left; margin-right:30px;" /></span>	
                            <div class="info-content">
                                <h2>Got 25 customers per day</h2>
                                <p>Despite becoming fast friends during college, the two ended up parting ways after graduation with Verdelis taking up a consulting job in the United Kingdom and Eleftheriou moving to California to start a new venture. While living miles apart, both shared the same frustrations with their smartphones: It was hard to type text messages and emails on them.</p>
                                <p><a href="#" class="readmore">Read more</a></p>
                            </div>

                        </div>
                    </div>
                </div>
                <section class="clients">
                    <div class="holder">
                        <!-- sponsors -->
                        <ul class="sponsors">
                            <li>
                                <a href="#">
                                    <span>
                                        <img src="#{request.contextPath}/resources/images/img4.png" alt="image description" />
                                        <img class="hover" src="#{request.contextPath}/resources/images/img4-hover.png" alt="image description" />
                                    </span>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <span>
                                        <img src="#{request.contextPath}/resources/images/img5.png" alt="image description" />
                                        <img class="hover" src="#{request.contextPath}/resources/images/img5-hover.png" alt="image description" />
                                    </span>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <span>
                                        <img src="#{request.contextPath}/resources/images/img6.png" alt="image description" />
                                        <img class="hover" src="#{request.contextPath}/resources/images/img6-hover.png" alt="image description" />
                                    </span>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <span>
                                        <img src="#{request.contextPath}/resources/images/img7.png" alt="image description" />
                                        <img class="hover" src="#{request.contextPath}/resources/images/img7-hover.png" alt="image description" />
                                    </span>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <span>
                                        <img src="#{request.contextPath}/resources/images/img8.png" alt="image description" />
                                        <img class="hover" src="#{request.contextPath}/resources/images/img8-hover.png" alt="image description" />
                                    </span>
                                </a>
                            </li>
                        </ul>
                    </div>
                </section>
            </h:form>
        </ui:define>
    </ui:composition>
</html>

